<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>生日快乐</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/style11.css">
    <link rel="stylesheet" href="css/yanhua.css">
    <link rel="stylesheet" href="css/style2D.css">
</head>

<body>
    <marquee style="position: fixed; top: 10px; color: #fff" scrollamount="10">Happy birthday!    ❤ 金城亿 ❤  生日快乐！</marquee>
    <marquee style="position: fixed; top: 30px; color: #ffd800" scrollamount="10"> 金城亿 生日快乐!</marquee>
    <marquee style="position: fixed; top: 55px; color: #00ff90" scrollamount="12">祝你有个美好前程</marquee>
    <marquee style="position: fixed; top: 80px; color: #00ff90" scrollamount="15">只缘感君一回顾，从此思君朝与暮！生日快乐。</marquee>
    <marquee style="position: fixed; top: 100px; color: #00ff90" scrollamount="9">你努力地在漆黑的道路上追寻着光芒，我愿化成星星伴你前行</marquee>
    <marquee style="position: fixed; top:  120px; color: red" scrollamount="8">祝你早日找到专属于你的耀眼光芒，生日快乐！</marquee>
    <marquee style="position: fixed; top:  140px; color: skyblue" scrollamount="6">祝你身体健康，万事如意，财源滚滚来。生日快乐，今年行大运。</marquee>
    <marquee style="position: fixed; top: 180px; color: #ffd800" scrollamount="7">祝你生日快乐，没有烦恼！</marquee>
    <marquee style="position: fixed; top: 230px; color: #fff" scrollamount="11">生日快乐，祝你万事如意一切顺心！</marquee>
    <marquee style="position: fixed; top: 250px; color: red" scrollamount="10">金城亿生日快乐！身体健康，工作顺利，心想事成，事事顺心！</marquee>
    <marquee style="position: fixed; top: 330px; color: #00ff90" scrollamount="10">如月之恒，如日之升，天曰九如，寿与天齐。祝金城亿生日快乐。</marquee>
    <marquee style="position: fixed; top: 450px; color: #fff" scrollamount="10">Happy birthday!    ❤ 金城亿 ❤  生日快乐！</marquee>
    <main style="text-align:center;position:absolute;">

        <ul class="star" style="--v: 1; --t: 1;">
            <li style="--i: 0"></li>
        </ul>
        <ul style="--v: 2; --t: 8; --direction:reverse">
            <li style="--i: 0"></li>
            <li style="--i: 1"></li>
            <li style="--i: 2"></li>
            <li style="--i: 3"></li>
            <li style="--i: 4"></li>
            <li style="--i: 5"></li>
            <li style="--i: 6"></li>
            <li style="--i: 7"></li>
        </ul>
        <ul style="--v: 3; --t: 12">
            <li style="--i: 0"></li>
            <li style="--i: 1"></li>
            <li style="--i: 2"></li>
            <li style="--i: 3"></li>
            <li style="--i: 4"></li>
            <li style="--i: 5"></li>
            <li style="--i: 6"></li>
            <li style="--i: 7"></li>
            <li style="--i: 8"></li>
            <li style="--i: 9"></li>
            <li style="--i: 10"></li>
            <li style="--i: 11"></li>
        </ul>
        <ul style="--v: 4; --t: 18; --direction:reverse">
            <li style="--i: 0"></li>
            <li style="--i: 1"></li>
            <li style="--i: 2"></li>
            <li style="--i: 3"></li>
            <li style="--i: 4"></li>
            <li style="--i: 5"></li>
            <li style="--i: 6"></li>
            <li style="--i: 7"></li>
            <li style="--i: 8"></li>
            <li style="--i: 9"></li>
            <li style="--i: 10"></li>
            <li style="--i: 11"></li>
            <li style="--i: 12"></li>
            <li style="--i: 13"></li>
            <li style="--i: 14"></li>
            <li style="--i: 15"></li>
            <li style="--i: 16"></li>
            <li style="--i: 17"></li>
        </ul>
        <ul style="--v: 5; --t: 22">
            <li style="--i: 0"></li>
            <li style="--i: 1"></li>
            <li style="--i: 2"></li>
            <li style="--i: 3"></li>
            <li style="--i: 4"></li>
            <li style="--i: 5"></li>
            <li style="--i: 6"></li>
            <li style="--i: 7"></li>
            <li style="--i: 8"></li>
            <li style="--i: 9"></li>
            <li style="--i: 10"></li>
            <li style="--i: 11"></li>
            <li style="--i: 12"></li>
            <li style="--i: 13"></li>
            <li style="--i: 14"></li>
            <li style="--i: 15"></li>
            <li style="--i: 16"></li>
            <li style="--i: 17"></li>
            <li style="--i: 18"></li>
            <li style="--i: 19"></li>
            <li style="--i: 20"></li>
            <li style="--i: 21"></li>
        </ul>
        <ul style="--v: 6; --t: 26; --direction:reverse">
            <li style="--i: 0"></li>
            <li style="--i: 1"></li>
            <li style="--i: 2"></li>
            <li style="--i: 3"></li>
            <li style="--i: 4"></li>
            <li style="--i: 5"></li>
            <li style="--i: 6"></li>
            <li style="--i: 7"></li>
            <li style="--i: 8"></li>
            <li style="--i: 9"></li>
            <li style="--i: 10"></li>
            <li style="--i: 11"></li>
            <li style="--i: 12"></li>
            <li style="--i: 13"></li>
            <li style="--i: 14"></li>
            <li style="--i: 15"></li>
            <li style="--i: 16"></li>
            <li style="--i: 17"></li>
            <li style="--i: 18"></li>
            <li style="--i: 19"></li>
            <li style="--i: 20"></li>
            <li style="--i: 21"></li>
            <li style="--i: 22"></li>
            <li style="--i: 23"></li>
            <li style="--i: 24"></li>
            <li style="--i: 25"></li>
        </ul>
        <ul style="--v: 7; --t: 32">
            <li style="--i: 0"></li>
            <li style="--i: 1"></li>
            <li style="--i: 2"></li>
            <li style="--i: 3"></li>
            <li style="--i: 4"></li>
            <li style="--i: 5"></li>
            <li style="--i: 6"></li>
            <li style="--i: 7"></li>
            <li style="--i: 8"></li>
            <li style="--i: 9"></li>
            <li style="--i: 10"></li>
            <li style="--i: 11"></li>
            <li style="--i: 12"></li>
            <li style="--i: 13"></li>
            <li style="--i: 14"></li>
            <li style="--i: 15"></li>
            <li style="--i: 16"></li>
            <li style="--i: 17"></li>
            <li style="--i: 18"></li>
            <li style="--i: 19"></li>
            <li style="--i: 20"></li>
            <li style="--i: 21"></li>
            <li style="--i: 22"></li>
            <li style="--i: 23"></li>
            <li style="--i: 24"></li>
            <li style="--i: 25"></li>
            <li style="--i: 26"></li>
            <li style="--i: 27"></li>
            <li style="--i: 28"></li>
            <li style="--i: 29"></li>
            <li style="--i: 30"></li>
            <li style="--i: 31"></li>
        </ul>
        <ul style="--v: 8; --t: 36; --direction:reverse">
            <li style="--i: 0"></li>
            <li style="--i: 1"></li>
            <li style="--i: 2"></li>
            <li style="--i: 3"></li>
            <li style="--i: 4"></li>
            <li style="--i: 5"></li>
            <li style="--i: 6"></li>
            <li style="--i: 7"></li>
            <li style="--i: 8"></li>
            <li style="--i: 9"></li>
            <li style="--i: 10"></li>
            <li style="--i: 11"></li>
            <li style="--i: 12"></li>
            <li style="--i: 13"></li>
            <li style="--i: 14"></li>
            <li style="--i: 15"></li>
            <li style="--i: 16"></li>
            <li style="--i: 17"></li>
            <li style="--i: 18"></li>
            <li style="--i: 19"></li>
            <li style="--i: 20"></li>
            <li style="--i: 21"></li>
            <li style="--i: 22"></li>
            <li style="--i: 23"></li>
            <li style="--i: 24"></li>
            <li style="--i: 25"></li>
            <li style="--i: 26"></li>
            <li style="--i: 27"></li>
            <li style="--i: 28"></li>
            <li style="--i: 29"></li>
            <li style="--i: 30"></li>
            <li style="--i: 31"></li>
            <li style="--i: 32"></li>
            <li style="--i: 33"></li>
            <li style="--i: 34"></li>
            <li style="--i: 35"></li>
        </ul>
        <p id="message" style="position:relative;margin-top:-40px;z-index:99999">
            <img src="img/birthday.png" alt="Alternate Text" />
            <br />
        </p>
    </main> 
    <div class="block-audio" style="z-index:10000;">
        <audio src="music/3.mp3" autoplay="autoplay" loop="loop"></audio>
        <!-- <audio class="exp" src="m/最爱.mp3" controls></audio>
        <audio class="exp" src="m/exp1.mp3" controls></audio>
        <audio class="exp" src="m/exp1.mp3" controls></audio>
        <audio class="exp" src="m/exp1.mp3" controls></audio>
        <audio class="exp" src="m/exp2.mp3" controls></audio>
        <audio class="exp" src="m/exp2.mp3" controls></audio>
        <audio class="exp" src="m/exp2.mp3" controls></audio>
        <audio class="exp" src="m/exp3.mp3" controls></audio>
        <audio class="exp" src="m/exp3.mp3" controls></audio>
        <audio class="exp" src="m/exp3.mp3" controls></audio>
        <audio class="exp" src="m/exp4.mp3" controls></audio>
        <audio class="exp" src="m/exp4.mp3" controls></audio>
        <audio class="exp" src="m/exp4.mp3" controls></audio>
        <audio class="exp" src="m/exp5.mp3" controls></audio>
        <audio class="exp" src="m/exp5.mp3" controls></audio>
        <audio class="exp" src="m/exp5.mp3" controls></audio>
        <audio class="exp" src="m/exp6.mp3" controls></audio>
        <audio class="exp" src="m/exp6.mp3" controls></audio>
        <audio class="exp" src="m/exp6.mp3" controls></audio>
        <audio class="exp" src="m/exp7.mp3" controls></audio>
        <audio class="exp" src="m/exp7.mp3" controls></audio>
        <audio class="exp" src="m/exp7.mp3" controls></audio>
        <audio class="exp" src="m/exp8.mp3" controls></audio>
        <audio class="exp" src="m/exp8.mp3" controls></audio>
        <audio class="exp" src="m/exp8.mp3" controls></audio>
        <audio class="launch" src="m/launch1.mp3" controls></audio>
        <audio class="launch" src="m/launch1.mp3" controls></audio>
        <audio class="launch" src="m/launch2.mp3" controls></audio>
        <audio class="launch" src="m/launch2.mp3" controls></audio>
        <audio class="launch" src="m/launch3.mp3" controls></audio>
        <audio class="launch" src="m/launch3.mp3" controls></audio>
        <audio class="launch" src="m/launch4.mp3" controls></audio>
        <audio class="launch" src="m/launch4.mp3" controls></audio>
        <audio class="launch" src="m/launch5.mp3" controls></audio>
        <audio class="launch" src="m/launch5.mp3" controls></audio> -->
    </div>
    <canvas id="canvas"></canvas>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/index1.js"></script>
    <script src="js/script.js"></script>

</body>

</html>
